<script setup>
import {computed, inject, provide, ref, watch} from "vue";
import suppliersBill from '@/api/finance/suppliersBill'
import BaseInfo from "./components/baseInfo.vue";
import Audit from "./components/audit.vue";
import State from "./components/state.vue";
import Attachment from "@/views/components/attachment.vue";


const crudRef = inject('crudRef')
const getDictData = inject('getDictData')
const visible = ref(false)

let footers = ref([])
const record = ref({})
const fileData = ref({type:5,span:24})
const open = async (data) => {
  record.value = data
  console.log(record.value)
  visible.value = true
}
const setFoot = (list) => {
  footers.value = list
}
const refreshRecode = async (type) => {
  console.log('刷新详情')
  let request = await suppliersBill.read(record.value.id)
  record.value = request.data
  if(type == true){
    console.log('刷新列表')
    crudRef.value.refresh()
  }
}
const colGap = ref(6)
const rowGap = ref(6)
provide('colGap', colGap)
provide('rowGap', rowGap)
provide('record', record)
provide('setFoot', setFoot)
provide('refreshRecode', refreshRecode)
provide('fileData', fileData)
defineExpose({ open ,refreshRecode})
</script>
<template>
  <a-drawer v-model:visible="visible" width="80%" :footer="footers.length > 0">
    <template #title>
      <div class="grid grid-cols-[minmax(0,1fr),auto] items-center">
        <div>客户账单#{{ record.id }}</div>
      </div>
    </template>
      <a-space direction="vertical" class="w-full">
        <a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xxl: 6 }" :colGap="colGap" :rowGap="rowGap">
          <base-info />
          <audit />
          <state />
          <attachment />
        </a-grid>
      </a-space>
      <template #footer>
        <div class="grid grid-cols-[minmax(0,1fr),auto] items-center">
          <div v-for="footer in footers" class="footer-item">{{footer.label}} : {{ footer.value }}</div>
        </div>
      </template>
  </a-drawer>
</template>
<style lang="less">
.footer-item{
  text-align: left;
  color: red;
}
</style>